<template>
  <div class="container">
    <div class="container-hotCity">
      <h3>热门城市:</h3>
      <p>
        <span @click="clickHotCity(item)" v-for="(item, index) of hotCity" :key="index">{{item}}</span>
      </p>
    </div>
    <div class="container-visited">
      <h3>最近访问</h3>
      <p>
        <span v-for="(item, index) of searchHistoryCity" :key="index">{{item}}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HotCityAndVisited',
  props: {
    hotCity: {
      type: Array,
      default() {
        return []
      }
    },
    searchHistoryCity: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    clickHotCity(city) {
      this.$emit('saveCityRecord', city)
      this.$store.dispatch('onlyChangeCity', city)
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  &-hotCity {
    border-bottom: 1px solid #E5E5E5;
    padding: 30px 0;
    background: #fff;
    h3 {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      vertical-align: top;
      display: inline-block;
      margin-right: 14px;
    }
    p {
      font-size: 14px;
      vertical-align: top;
      display: inline-block;
      margin-top: 2px;
      span {
        margin: 0 20px;
        color: #666;
        display: inline-block;
        cursor: pointer;
        &:hover {
          color: #222222;
          font-weight: 500;
        }
      }
    }
  }
  &-visited {
    @extend .container-hotCity;
  }
}
</style>